<template>
  <div>
    <div>
      <vxe-button @click="fullValidEvent">校验全量数据</vxe-button>
    </div>

    <vxe-table
      style="width: 100%"
      border
      show-overflow
      keep-source
      height="300"
      ref="tableRef"
      :data="tableData"
      :edit-rules="validRules"
      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
    >
      <vxe-column type="checkbox" width="60" fixed="left"></vxe-column>
      <vxe-column type="seq" width="70" fixed="left"></vxe-column>
      <vxe-column
        field="name"
        title="Name"
        width="100"
        fixed="left"
        :edit-render="{ name: 'VxeInput' }"
      ></vxe-column>
      <vxe-column
        field="nickname"
        title="Nickname"
        min-width="260"
        :edit-render="{ name: 'VxeInput' }"
      ></vxe-column>
      <vxe-column
        field="role"
        title="Role"
        min-width="260"
        :edit-render="{ name: 'VxeInput' }"
      ></vxe-column>
    </vxe-table>
  </div>
</template>

<script lang="jsx" setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { VxeUI } from "vxe-table";
const tableRef = ref();
const tableData = ref([
  {
    id: 10001,
    name: "Test1",
    role: "Develop",
    sex: "0",
    age: null,
    address: "test abc",
  },
  {
    id: 10002,
    name: "",
    role: "Test",
    sex: "1",
    age: 22,
    address: "Guangzhou",
  },
]);
const validRules = ref({
  name: [{ required: true, message: "必须填写" }],
  nickname: [{ required: true, message: "必须填写" }],
  role: [{ required: true, message: "必须填写" }],
});
const fullValidEvent = async () => {
  const $table = tableRef.value;
  const errMap = await $table.validate(true);
  if (errMap) {
    ElMessage.error({
      message: "校验不通过1",
      showClose: true,
      grouping: true,
    });
    return;
  }
  ElMessage.success({
    message: "校验通过",
  });
};
</script>
